<script setup lang="ts">
import { mockTable } from '@/mock'

const { columns, data, loadRows } = mockTable(['code', 'name', 'status'], ['资源编码', '资源名称', '状态'])

loadRows([
  ['source1', '资源1', '正常'],
  ['source2', '资源2', '停用'],
  ['source3', '资源3', '正常'],
  ['source4', '资源4', '停用'],
  ['source5', '资源5', '停用'],
])
</script>

<template>
  <ElForm :inline="true">
    <ElFormItem label="资源名称">
      <ElInput placeholder="请输入资源名称" />
    </ElFormItem>
  </ElForm>

  <ElTable
    :border="true"
    :stripe="true"
    :data="data"
  >
    <ElTableColumn
      v-for="item in columns"
      :key="item.property"
      v-bind="item"
    />
    <ElTableColumn label="操作">
      <template #default>
        <ElButton
          type="primary"
          size="small"
        >
          修改
        </ElButton>
        <ElButton
          type="danger"
          size="small"
        >
          删除
        </ElButton>
      </template>
    </ElTableColumn>
  </ElTable>
</template>

<route lang="json5">
{
  "meta": {
    "index": 0,
    "title": "资源列表",
  },
}
</route>
